<template>

	<view class="container">
		<!-- 头部样式 -->
		<view @click="poll" :catchtouchmove="true" class="question">
			<!-- style="padding-top:30rpx" -->
			<view class="navBarBox">
				<!-- 状态栏占位 -->
				<view class="statusBar" :style="{paddingTop: statusBarHeight + 'rpx'}"></view>
				<!-- 真正的导航栏内容 -->
				<view class="navBar">
					<image class="logo" src="https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/images/logo.png"
						mode="scaleToFill"></image>
					<view class="navBarText">新鲜 · 亲民 · 快捷</view>
				</view>
				<view class="search">
					<text class="searvhText">搜索商品</text>
					<text class="searvhIcon"></text>
				</view>
			</view>
		</view>

		<!-- 1、轮播图，调接口 ,可做组件-->
		<!-- 问题点-轮播图自定义指示点 -->
		<swiper indicator-dots="true" :interval="1000" :duration="500" class="swiper" autoplay="true" interval="2000"
			duration="500" circular="true" indicator-color="rgba(244,244,244,0.3)" indicator-active-color="#ffffff">
			<swiper-item v-for="(item , index) in swiperList" :key="index">
				<view class="swiper">
					<image :src="item.imgUrl"></image>
				</view>
			</swiper-item>
		</swiper>


		<view class="body">
			<!-- 2、固定静态 -->
			<view class="fix">
				<scroll-view scroll-x class="scroll-view">
					<view class="itemList">
						<view class="item">
							<navigator url="/" class="fixNavigator" v-for="item in CategoryList" :key="item.id">
								<image :src="item.icon" mode="" role='img' class="fixIcon"></image>
								<text class="fixText">{{item.name}}</text>
							</navigator>
						</view>

						<view class="item">
							<navigator url="/" class="fixNavigator" v-for="item in CategoryList" :key="item.id">
								<image :src="item.icon" mode="" role='img' class="fixIcon"></image>
								<text class="fixText">{{item.name}}</text>
							</navigator>
						</view>

					</view>
				</scroll-view>
			</view>

			<!-- 3、点击跳转 -->
			<view class="recommend">
				<view class="box" tap="getMutli" v-for="item in MutliList" :key="item.id">
					<view class="top">
						<text class="topLeft">{{item.alt}}</text>
						<text class="topRight">{{item.title}}</text>
					</view>
					<view hover-class="none" role="link" class="button" @click="gotoGoodsList(item.type)">
						<image :src="item.pictures[0]" mode="aspectFit" role="img" class="image"></image>
						<image :src="item.pictures[1]" mode="aspectFit" role="img" class="image"></image>
					</view>
				</view>
			</view>

			<!-- 下拉加载 -->
			<!-- 4、上拉刷新 -->
			<!-- 4.1猜你喜欢头部 -->
			<view class="like">
				<image src="/static/images/bubble.png" class="likeImg"></image>
				<text class="text">猜你喜欢</text>
				<image src="/static/images/bubble.png" class="likeImg"></image>
			</view>
			<!-- 4.2猜你喜欢下拉刷新 -->
			<view class="pullUp">
				<navigator :url=" '/subpkg/goods_detail/goods_detail?id=' + item.id " class="navigate"
					v-for="item in guessLikeList" :key="item.id">
					<image :src="item.picture" mode="aspectFill" role="img" class="likeImg"></image>
					<view class="likeName">{{item.name}}</view>
					<view class="likePrice">
						<text class="small">￥</text>
						<text>{{item.price}}</text>
					</view>
				</navigator>
			</view>
		</view>
	</view>
</template>

<script>
	//接口
	import {
		getSwiper,
		getCategory,
		getMutli,
		getguessLike
	} from "../../api/index.js"
	export default {
		data() {
			return {
				//导航栏
				// 状态栏高度
				statusBarHeight: 0,
				// 导航栏高度
				navBarHeight: 100,
				//导航栏吸顶
				rect: '', //页面滚动距离
				menutop: '', //组件距离顶部的距离
				topdata: '',
				// href: 'https://uniapp.dcloud.io/component/README?id=uniui',
				swiperList: [], //1、轮播图列表
				CategoryList: [], //横向滚动列表
				MutliList: [], //3、推荐列表
				//4、下拉
				guessLikeList: [], //接收接口数据的容器
				params: {
					page: 1, //页数
					pageSize: 10, //每一页数据的数量
				}, //需要传递到接口的参数
				total: 0, //接口数据总条数
				isLoging: false //节流1，设定节流值是false
			}
		},
		//上拉刷新
		onReachBottom() {
			//加载完成  当数据列表长度大于等于接口总条数的时候，显示加载完成
			if (this.guessLikeList.length >= this.total) {
				uni.showToast({
					title: '别往下拉啦，没啦！'
				})
				return
			}
			if (this.isloading) return
			this.params.page = ++this.params.page //每次上拉都会页数都会加一
			this.getguessLike() //每次上拉都调用接口数据
		},
		//下拉加载
		onPullDownRefresh() {
			//1、重置数据
			this.guessLikeList = []
			this.params.page = 1
			this.params.pageSize = 10
			this.total = 0
			//2、通过回调函数解决异步问题，设置时间关闭下拉刷新
			// this.getguessLike(() => {
			// 	uni.stopPullDownRefresh()
			// }, 1000)
			this.getguessLike(() => uni.stopPullDownRefresh())

		},
		// 方法
		methods: {
			// 点击导航栏回到顶部
			poll() {
				uni.pageScrollTo({
					scrollTop: this.topdata + 2,
					duration: 300
				})
			},
			// 调用接口
			// 1、轮播图
			async getSwiper() {
				const {
					result
				} = await getSwiper()
				this.swiperList = result
			},
			// 横向滚动
			async getCategory() {
				const {
					result
				} = await getCategory()
				this.CategoryList = result
			},

			//3、点击跳转
			async getMutli() {
				const {
					result: res
				} = await getMutli()
				this.MutliList = res
			},

			//4、数据
			async getguessLike(cb) {
				// 数据加载
				uni.showLoading({
					title: "加载中……"
				})
				this.isLoging = true
				//调用接口，result是数据整体，items是列表整体
				const {
					result
				} = await getguessLike(this.params)
				this.isLoging = false
				this.total = result.counts
				// 合并列表数据，每一次触底都会将数据合并入列表
				this.guessLikeList = [...this.guessLikeList, ...result.items]
				// 只要数据请求完毕，就立即按需调用 cb 回调函数
				cb && cb()
				// 合并数据后加载结束
				uni.hideLoading()
			},
			gotoGoodsList(type) {
				switch (type) {
					case 1:
						uni.navigateTo({
							url: '/subpkg/discount/discount'
						})
						break;
					case 2:
						uni.navigateTo({
							url: '/subpkg/RecommendGoods/RecommendGoods'
						})
						break;
					case 3:
						uni.navigateTo({
							url: '/subpkg/OneShop/OneShop'
						})
						break;
					case 4:
						uni.navigateTo({
							url: '/subpkg/HotNew/HotNew'
						})
						break;

				}
			}
		},
		//生命函数
		onLoad() {
			this.getSwiper() // 1、轮播图
			this.getCategory() //2、横向滚动
			this.getMutli() //3、点击跳转
			this.getguessLike() //4、下拉
			// 监听筛选组件距离顶部的距离
			const query = uni.createSelectorQuery()
			query.select('#boxFixed').boundingClientRect()
			query.exec((res) => {
				this.menutop = res[0].top
			})
		},
		//上拉刷新
		onReachBottom() {
			//加载完成  当数据列表长度大于等于接口总条数的时候，显示加载完成
			if (this.guessLikeList.length >= this.total) {
				uni.showToast({
					title: '别往下拉啦，没啦！'
				})
				return
			}
			this.params.page = ++this.params.page //每次上拉都会页数都会加一
			this.getguessLike() //每次上拉都调用接口数据
		},
		//下拉加载
		onPullDownRefresh() {
			//1、重置数据
			this.guessLikeList = []
			this.params.page = 1
			this.params.pageSize = 10
			this.total = 0
			//2、通过回调函数解决异步问题，设置时间关闭下拉刷新
			this.getguessLike(() => {
				uni.stopPullDownRefresh()
			}, 1000)

		},
	}
</script>

<style lang="scss">
	.container {
		.question {
			// 强吸顶
			position: -webkit-sticky;
			position: sticky;
			top: var(--window-top);
			z-index: 99;

			//导航栏
			//自定义导航栏
			.navBarBox {
				display: flex;
				background-image: url("/static/images/navigator_bg.png");
				background-size: cover;
				position: relative;
				flex-direction: column;
				box-sizing: border-box;
				padding-top: 70rpx;

				//状态栏占位
				.statusBar {}

				//真正的导航栏内容
				.navBar {
					display: flex;
					align-items: center;
					height: 64rpx;
					padding-left: 30rpx;
					box-sizing: border-box;

					//图片
					.logo {
						width: 166rpx;
						height: 39rpx;
						vertical-align: middle;
						display: inline-block;
						overflow: hidden;
					}

					//标题
					.navBarText {
						flex: 1;
						line-height: 28rpx;
						color: #fff;
						margin: 2rpx 0 0 20rpx;
						padding-left: 20rpx;
						border-left: 1rpx solid #fff;
						font-size: 26rpx;
					}
				}

				//搜索栏
				.search {
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 0 10rpx 0 26rpx;
					height: 64rpx;
					margin: 16rpx 20rpx;
					color: #fff;
					font-size: 28rpx;
					border-radius: 32rpx;
					background-color: rgba(255, 255, 255, 0.5);
					box-sizing: border-box;

					.searvhText {
						font-family: "erabbit" !important;
						font-style: normal;
						-webkit-font-smoothing: antialiased;
						-moz-osx-font-smoothing: grayscale;
					}

					.searvhIcon {
						font-size: 30rpx;
						padding: 15rpx;
						font-family: "erabbit" !important;
						font-style: normal;
						-webkit-font-smoothing: antialiased;
						-moz-osx-font-smoothing: grayscale;
					}
				}
			}
		}

		// 1、轮播图
		.swiper {
			width: 100%;
			height: 278rpx;

			image {
				width: 100%;
				height: 100%;
				border-radius: 10rpx;
			}
		}

		.body {
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			padding: 0 20rpx;
			background-color: #f4f4f4;



			// 2、固定静态
			.fix {
				// background-color: aqua;
				// width: 100%;
				// height: 164rpx;
				margin: 20rpx 0;
				padding: 10rpx 0;
				box-sizing: border-box;
				display: block;

				.scroll-view {
					flex: 1;
					display: block;
					width: 100%;
					height: 100%;
					overflow: hidden;
					box-sizing: border-box;

					.itemList {
						scroll-snap-align: none;
						display: flex;
						width: 200%;
						box-sizing: border-box;
						// background-color: #7f7f7f;

						.item {
							width: 50%;
							height: 100%;
							display: flex;
							flex-wrap: wrap;
							text-align: center;
							min-height: 328rpx;
							box-sizing: border-box;
							// background-color: cadetblue;

							.fixNavigator {
								width: 20%;
								height: auto;
								margin-bottom: 28rpx;
								display: flex;
								flex-direction: column;
								justify-content: center;
								align-items: center;
								box-sizing: border-box;
								// background-color: #cf4444;

								.fixIcon {
									width: 100rpx;
									height: 100rpx;
									vertical-align: middle;
									display: inline-block;
									overflow: hidden;
									// background-color: #7f7f7f;
								}

								.fixText {
									font-size: 26rpx;
									color: #666;

								}
							}
						}
					}
				}
			}

			// 3、点击跳转
			.recommend {
				height: 508rpx;
				width: 100%;
				border-radius: 10rpx;
				box-sizing: border-box;
				// 当轴线超过1条(多行)的时候，flex容器可以把多条轴线视为元素对待，可以进行对齐
				display: flex;
				flex-wrap: wrap;
				background-color: #ffffff;


				.box {
					display: flex;
					flex-direction: column;
					width: 50%;
					height: 254rpx;
					border-right: 1rpx solid #eee;
					border-top: 1rpx solid #eee;
					box-sizing: border-box;

					.top {
						display: flex;
						align-items: center;
						padding: 24rpx 24rpx 0;
						font-size: 32rpx;
						color: #262626;
						position: relative;
						justify-content: start;
						box-sizing: border-box;

						.topLeft {
							font-family: PingFangSC-Regular;
							font-size: 32;
							color: #262626;
						}

						.topRight {
							font-size: 24rpx;
							color: #7f7f7f;
							margin-left: 18rpx;
						}
					}

					.button {
						flex: 1;
						padding: 15rpx 20rpx;
						display: flex;
						justify-content: space-between;
						align-items: center;
						box-sizing: border-box;
						height: auto;
						width: auto;

						.image {
							width: 150rpx;
							height: 150rpx;
							vertical-align: middle;
							overflow: hidden;
							display: inline-block;
						}
					}
				}

				// 个数为奇数取消上边框
				.box:nth-child(-n+2) {
					border-top: 0 none;
				}

				// 个数为偶数取消右边框
				.box:nth-child(2n) {
					border-right: 0 none;
				}
			}

			//4、猜你喜欢
			.like {
				display: flex;
				justify-content: center;
				align-items: center;
				padding: 30rpx 28rpx 30rpx 30rpx;
				// margin: 30rpx 0;
				background-color: #f4f4f4;

				//文字前后的图片
				.likeImg {
					width: 20rpx;
					height: 20rpx;
					background-size: contain;
					margin: 0 10rpx;
					margin-top: 0px;
					margin-right: 5px;
					margin-bottom: 0px;
					margin-left: 5px;
				}
			}

			//下拉整体
			.pullUp {
				width: 100%;
				display: flex; //弹性盒子
				flex-wrap: wrap; //换行
				justify-content: space-between; //主轴上的空白区域，两端不留白，盒子之间的间隙平分
				// padding: 0 20rpx;
				background-color: #f4f4f4;
				box-sizing: border-box;

				//单个商品
				.navigate {
					width: 48.5%;
					height: auto;
					padding: 24rpx 20rpx 20rpx;
					margin-bottom: 20rpx;
					border-radius: 10rpx;
					overflow: hidden;
					display: block; //将元素显示为块级元素
					height: auto;
					background-color: #fff;
					box-sizing: border-box;

					.likeImg {
						width: 304rpx;
						height: 260rpx;
						vertical-align: middle;
						display: inline-block;
						overflow: hidden; //该元素的内容若超出了给定的宽度和高度属性，那么超出的部分将会被隐藏，不占位。
					}

					.likeName {
						height: 75rpx;
						margin: 10rpx 0;
						font-size: 26rpx;
						color: #262626;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;

					}

					.likePrice {
						line-height: 1;
						padding-top: 4rpx;
						color: #cf4444;
						font-size: 26rpx;
						display: block;

						.small {
							font-size: 80%;
						}
					}
				}
			}
		}



	}
</style>